import { View, Image, Text, Input } from '@tarojs/components'
import './index.scss'
import CloudIcons from '@/assets/ImageUrlConfig'
import { showToast, showLoading, hideLoading, chooseMedia, cloud } from '@tarojs/taro'
import { useState, useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { UpdateUserApi } from '@/api/index'

export default function DrawerUserSetting({ show, setShow }) {
	const dispatch = useDispatch()

	let timer
	const Amination_Timer = 200
	const [isShowMask, setIsShowMask] = useState(false)
	const [drawerClassName, setDrawerClassName] = useState('drawer-user-setting')

	useEffect(() => {
		clearTimeout(timer)
		if (show) {
			setIsShowMask(true)
			timer = setTimeout(() => {
				setDrawerClassName('drawer-user-setting load')
			}, Amination_Timer)
			return
		}
		setDrawerClassName('drawer-user-setting')
		timer = setTimeout(() => {
			setIsShowMask(false)
		}, Amination_Timer)
	}, [show])

	const [isShowInputForInputNewName, setIsShowInputForInputNewName] = useState(false)

	const reNameUser = (e) => {
		setIsShowInputForInputNewName(false)
		const newName = e.detail.value
		if (!newName) {
			return
		}
		showLoading({
			title: '更新中',
		})
		UpdateUserApi({
			nickname: newName,
		})
			.then((data) => {
				dispatch({
					type: 'UPDATE_USER',
					payload: data,
				})
			})
			.catch(() => {
				showToast({
					title: '更新失败',
					icon: 'error',
					duration: 1000,
				})
			})
			.finally(() => {
				hideLoading()
			})
	}

	const updateAvatar = () => {
		setIsShowInputForInputNewName(false)
		chooseMedia({
			count: 1,
			sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
			mediaType: ['image'],
			sourceType: ['album', 'camera'],
			success: (res) => {
				let tmpPath = res.tempFiles[0].tempFilePath
				const fileName = tmpPath.split('/').pop()
				cloud
					.uploadFile({
						cloudPath: `gaga-notebook/avatar/${fileName}`,
						filePath: tmpPath,
					})
					.then(({ fileID }) => {
						UpdateUserApi({
							avatar: fileID,
						})
							.then((data) => {
								dispatch({
									type: 'UPDATE_USER',
									payload: data,
								})
							})
							.catch((err) => {
								showToast({
									title: '更新失败',
									icon: 'error',
									duration: 1000,
								})
								throw err
							})
					})
					.catch((err) => {
						showToast({
							title: '更新失败',
							icon: 'error',
							duration: 1000,
						})
						throw err
					})
			},
		})
	}

	return (
		<View
			className={isShowMask ? 'mask' : 'mask hiden'}
			onTap={() => {
				setShow(false)
			}}
		>
			<View
				className='user-setting-warp'
				onTap={(e) => {
					e.stopPropagation()
				}}
			>
				{/* 输入新名字 */}
				<View className={isShowInputForInputNewName ? 'input-for-rename load' : 'input-for-rename'}>
					{isShowInputForInputNewName ? <Input focus onConfirm={reNameUser}></Input> : null}
				</View>
				<View className={drawerClassName}>
					<View className='settings'>
						<View
							class='item'
							onTap={() => {
								setIsShowInputForInputNewName(true)
							}}
						>
							<Image src={CloudIcons.changeName}></Image>
							<Text>修改昵称</Text>
						</View>
						<View
							class='item'
							onTap={() => {
								setIsShowInputForInputNewName(false)
								updateAvatar()
							}}
						>
							<Image src={CloudIcons.image}></Image>
							<Text>设置头像</Text>
						</View>
					</View>
				</View>
			</View>
		</View>
	)
}
